import React, { useEffect, useState } from 'react';
import { axconst } from '@/shared/axconst';
import { AxColumnEnum, AxTable } from '@/components/AxList';
import { axurl } from '@/shared/axurl';
import { axhttp } from '@/shared/axhttp';

const url = axurl.material.order;
const { getX } = axhttp;
const Index: React.FC<any> = props => {
    const { orderId } = props;
    const [data, setData] = useState<any>(axconst.initialList);

    useEffect(() => {
        getX(url.readDetail, { orderIds: [orderId] }).then((res: any) => {
            const d = { list: [], success: true };
            res && res.data && res.data.map((m: any) => {
                const s: never[] = m.products.map((n: any) => ({
                    ...n,
                    id: n.productId,
                }));
                d.list.push(...s);
            })
            setData(d);
        })
    }, [orderId]);

    /** 配置列 */
    const columns = [
        {
            dataIndex: 'image',
            width: 110,
            render: (val: any) => {
                return (<img src={val && val !== '' && val || '/img/nopic.jpg'} style={{ height: 110, width: 110 }} />);
            },
        },
        {
            title: '产品名称',
            dataIndex: 'name',
            width: axconst.width.material,
        },
        {
            title: 'CAS编码',
            dataIndex: 'casCode',
            width: axconst.width.casCode,
        },
        {
            title: '管控级别',
            dataIndex: 'controlLevel',
            width: axconst.width.controlLevel,
        },
        {
            title: '纯度',
            dataIndex: 'purity',
            width: axconst.width.purity,
        },
        {
            title: '价格',
            dataIndex: 'price',
            width: axconst.width.price,
        },
        {
            title: '产品性状',
            dataIndex: 'character',
            width: axconst.width.fouronly,
            render: (val: any) => AxColumnEnum({ enumName: 'character', value: val }),
        },
        {
            title: '单位',
            dataIndex: 'unit',
            width: axconst.width.unit,
        },
        {
            title: '小计',
            dataIndex: 'money',
            width: axconst.width.fouronly,
        },
        {
            title: '包装规格',
            dataIndex: 'packingSpec',
            width: axconst.width.packingSpec,
        },
        {
            title: '单件容量',
            dataIndex: 'oneCapacity',
            width: axconst.width.oneCapacity,
        },
        {
            title: '单件包装单位',
            dataIndex: 'onePackingUnit',
            width: axconst.width.onePackingUnit,
        },
        {
            title: '包装单位',
            dataIndex: 'packingUnit',
            width: axconst.width.packingUnit,
        },
        {
            title: '生产日期',
            dataIndex: 'productDate',
            width: axconst.width.time,
        },
        {
            title: '英文名称',
            dataIndex: 'eName',
            width: axconst.width.eName,
        },
        {
            title: '别名',
            dataIndex: 'alias',
            width: axconst.width.alias,
        },
        {
            title: '产品规格',
            dataIndex: 'productSpec',
            width: axconst.width.productSpec,
        },
        {
            title: '品牌',
            dataIndex: 'brand',
            width: axconst.width.brand,
        },
        {
            title: '分子式',
            dataIndex: 'formula',
            width: axconst.width.formula,
        },
        {
            title: '分类名称',
            dataIndex: 'categoryName',
            width: axconst.width.categoryName,
        },
    ];

    return (
        <AxTable
            showTopSlider={false}
            rowKey='detailId'
            size='default'
            bordered={false}
            columns={columns}
            checkboxModel={false}
            // addemptycolumn={true}
            data={data}
        />
    );
};

export default Index;